<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <!-- Include CSS styling -->
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        
        <!-- Include TinyC5 library -->
        <script type="text/javascript" src="js/TinyC5-0.6.js"></script>
        
        <!-- Main FX Script -->
        <script type="text/javascript">
            
            // Main entry point
            function main() {
                
                // Define require vars
                var tinyC5, fc, color, args;
                
                // Creating TinyC5 instance
                // Note: It's ofcourse possible to create multiple instances
                tinyC5 = new TinyC5();
                
                // Defining the properties
                args = {
                    // Width in pixel
                    width: 160,
                    // Height in pixel
                    height: 100,
                    // Scale factor (relates to width & height)
                    scale: 2,
                    // Disable fullscreen stretching
                    fullscreen: false,
                    // Set browser windows title
                    title: 'Tutorial | TinyC5',
                    // Disable smoothing
                    smoothing: false,
                    // Disable mouse capturing (no need for mouse support)
                    captureMouse: false,
                    // Set default background color (RGBA)
                    bgColor: tinyC5.color( 0, 0, 0, 255 ),
                    // Define DOM container for TinyC5 canvas element
                    container: document.getElementById( 'tinyC5_container' )
                };
                
                // Initialize TinyC5 instance with arguments
                tinyC5.init( args );
                
                // Overwrite update function
                // This is the place where to put the magical FX logic
                tinyC5.update = function() {
                    // Declare local vars
                    var p, dx, dy, index = 0;

                    // tinyC5.getTime() returns passed millisecs since tinyC5.start() was called
                    // We divide it and have a steady growing value we use as a time modifier
                    fc = tinyC5.getTime()/800;
                                        
                    // Make a local reference to tinyC5.pixels array
                    p = tinyC5.pixels;
                    
                    // Create some local deltas for movement
                    dx = Math.sin( fc ) % 10 * 32;
                    dy = Math.cos( fc ) % 10 * 48;

                    // Loop over the pixel buffer array
                    // tinyC5.WIDTH and HEIGHT are the buffer 'height' and 'width'
                    for( var y = 0; y < tinyC5.HEIGHT; y++ ) {
                        for( var x=0; x < tinyC5.WIDTH; x++ ) {                            
                            // Calculate color YES/NO
                            color = ( ((x+dy >> 4) & 1) ^ ((y+dx >> 4) & 1) );
                            // Set values for red, green, blue, alpha
                            p[index++] = (x+y) * color;
                            p[index++] = (155-x) * color;
                            p[index++] = (y) * color;
                            p[index++] = 255;
                        }
                    }
                }

                // Start the show
                tinyC5.start();
            }
        </script>
    </head>
    <!-- Set main entry call -->
    <body onload="main()">
        <div id="container">
            <!-- This is the DOM element to which the TinyC5 canvas element is appended -->
            <div id="tinyC5_container">
            </div>
        </div>
        <div id="footer">
            Tutorial | Created with <a href="http://www.dbfinteractive.com/forum/index.php?topic=5397.0">TinyC5</a>
        </div>        
    </body>
</html>